<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { showToast, Toast } from "vant";
import axios from "axios";
import { userImg } from "../../store";
// 获取store
const store = userImg();
const { pushimg, img_list, pushspace, space_list, like, deluseimg, pladd, plarr, delspace } = store;
const back = ()=>{
  history.back();
}
// 图片链接集合
const imglist = ref([]);
// 图片留言绑定
const message = ref("");
// 定义动态的数据
const list = space_list;
// [
//   {
//     name: "张三",
//     content: "今天天气真好",
//     img: "/cxy.jpg",
//     time: "2022-07-01 12:00:00",
//     like: 100,
//     comment: 200,
//     share: 300,
//   },
//   {
//     name: "张三",
//     content: "今天天气真好",
//     img: "/cxy.jpg",
//     time: "2022-07-01 12:00:00",
//     like: 100,
//     comment: 200,
//     share: 300,
//   },
//   {
//     name: "张三",
//     content: "今天天气真好",
//     img: "/cxy.jpg",
//     time: "2022-07-01 12:00:00",
//     like: 100,
//     comment: 200,
//     share: 300,
//   },
// ];

// 定义初始数据
// onBeforeMount(() => {
//   getList();
// });
// 获取列表
// const getList = () => {
//   axios.get("/api/user").then((res) => {
//     console.log(res);
//   });
// };
// // 添加数据
// const addList = () => {
//   axios.post("/api/space").then((res) => {
//     console.log(res);
//   });
// };
const likes = ref(false);

// 收藏
const ppl = () => {
  if (list.filter((item) => item.like == true).length > 0) {
    likes.value = !likes.value;
  } else {
    showToast("收藏为空!");
  }
};

// 右上角+拉下功能列表
const showPopover = ref(false);
const actions = [
  { text: "上传图片", icon: "photo-o" },
  { text: "我的动态", icon: "more-o" },
  { text: "添加动态", icon: "add-o" },
];

// 添加动态 上传图片 弹窗中文本内容
const show = ref(false);
const text = ref("");
const onSelect = (action: any) => {
  text.value = action.text;
  show.value = true;
};

// 分享链接
const options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];
// 分享链接弹窗
const showShare = ref(false);
const onSelects = (option: any) => {
  showToast(option.name);
  showToast("已复制分享链接");
  showShare.value = false;
};

// 上传图片
const fileList = ref([]);
const afterRead = (file: any) => {
  // 此时可以自行将文件上传至服务器
  // 获取所有图片的上传路径
  const imgList = fileList.value.map((item: any) => item.objectUrl);
  imglist.value = imgList;
};

// 保留编辑
const showDialog = ref(false);
const onConfirm = () => {
  showToast("已保留");
};

// 不保留
const onCancel = () => {
  showToast("已丢弃");
  imglist.value = [];
  message.value = "";
  fileList.value = [];
};

// 上传确认
const update = () => {
  show.value = false;
  if (text.value == "上传图片") {
    let imgarr = {
      id: img_list.length + 1,
      message: message.value, //图片留言
      imglist: imglist.value, //上传的图片
      time: new Date().toLocaleString(), //当前时间
    };
    pushimg(imgarr);
  } else {
    let spacearr = {
      id: space_list.length + 1,
      name: "张三",
      message: message.value, //动态内容
      imglist: imglist.value, //上传的图片
      like: false,
      time: new Date().toLocaleString(),
      children: [],
    };
    pushspace(spacearr);
  }
  imglist.value = [];
  message.value = "";
  fileList.value = [];
  setTimeout(() => {
    text.value = "添加";
  }, 2000);
};

// 是否保留提示框
const closeSheet = () => {
  if (
      (text.value != "我的动态" && message.value != "") ||
      imglist.value.length > 0
  ) {
    showDialog.value = true;
  }
};

//我的图片集
const showimg = ref(false);
const setimglist = () => {
  showimg.value = true;
};

// 评论
const plid = ref();
const pltext = ref("")
const pl = (id: any) => {
  plid.value = id;
};
const plconfirm = () => {
  if (pltext.value != "") {
    let plarr = {
      id: plid.value,
      // 将当前时间转化字符串作为id
      hid: new Date().getTime().toString(),
      name: "张三",
      content: pltext.value,
      time: new Date().toLocaleString(),
    };
    pladd(plarr);
    pltext.value = "";
  }else{
    showToast("评论内容不能为空");
  }
};

// 回复
const huiid = ref('');
const huitext = ref("");
const hui = (id: any) => {
  if (huiid.value == '') {
    huiid.value = id
  }else{
    huiid.value = '';
  }
};
const huiconfirm = () => {
  if (huitext.value != "") {
    let huiarr = {
      id: huiid.value,
      name: "张三",
      content: huitext.value,
      time: new Date().toLocaleString(),
    };
    pladd(huiarr);
    huitext.value = "";
  } else {
    showToast("回复内容不能为空");
  }
};

// ... 动态功能
const showPopover2 = ref(false);
const popoverid = ref('')
const popoverindex = ref('')
// 通过 actions 属性来定义菜单选项
const actions2 = [
  { text: '转发' , icon: "share-o"},
  { text: '收藏' , icon: "like-o" },
  { text: '删除' , icon: "delete-o"},
];
const onSelect2 = (action: any) => {
  if (action.text == '转发') {
    showShare.value = true;
  }else if (action.text == '收藏') {
    like(popoverindex.value)
  }else{
    delspace(popoverindex.value)
  }
};
const setPopover = (ids:any, index: any)=>{
  popoverid.value = ids;
  popoverindex.value = index;
  showPopover2.value = true;
}

const scrollToElement = ()=> {
  // 获取目标元素
  const targetElement = document.getElementById('target-element');
  if (targetElement) {
    // 使用scrollIntoView()方法滚动到该元素
    targetElement.scrollIntoView({ behavior: 'smooth' });
  }
}

const youxi =()=>{
  window.location.href = 'http://sr.yanzhi21.com/'
}
</script>

<template>
  <div>
    <!-- 顶部 -->
    <div class="container">
      <div>
        <!-- 返回 -->
        <van-icon name="arrow-left" size="25px" color="#fff" @click="back"/>
      </div>
      <div>好友动态</div>
      <div class="flex-center">
        <van-icon name="share-o" color="#fff" @click="showShare = true" />
        &nbsp;
        <van-icon name="fire-o" color="#fff" @click="ppl" />
        &nbsp;
        <van-popover
            @select="onSelect"
            placement="left-start"
            v-model:show="showPopover"
            :actions="actions"
        >
          <template #reference>
            <van-icon name="add-o" color="#fff" />
          </template>
        </van-popover>
      </div>
    </div>
    <!-- banner背景图 -->
    <div class="banner">
      <van-image width="100%" height="100%" fit="contain" src="/cxy.jpg" />
      <div class="flex-img">
        <van-image round width="70px" height="70px" src="/cover.jpg" />
      </div>
      <div class="flex-text">
        <span>张三李四</span>
      </div>
    </div>
    <!-- banner下方功能列表 -->
    <div class="f-list">
      <dl>
        <dt>
          <van-icon name="photo-o" size="18" @click="setimglist()" />
        </dt>
        <dd>相册</dd>
      </dl>
      <dl>
        <dt>
          <van-icon name="chat-o" size="18" @click="scrollToElement()"/>
        </dt>
        <dd>说说</dd>
      </dl>
      <dl>
        <dt>
          <van-icon name="shop-collect-o" size="18" />
        </dt>
        <dd>个性化</dd>
      </dl>
      <dl>
        <dt>
          <van-icon name="gem-o" size="18" />
        </dt>
        <dd>黄钻</dd>
      </dl>
      <dl>
        <dt>
          <van-icon name="send-gift-o" size="18" @click="youxi()"/>
        </dt>
        <dd>小游戏</dd>
      </dl>
    </div>
    <!-- 动态内容 -->
    <div id="target-element"></div>
    <div class="content">
      <div v-for="(item, index) in list" :key="index">
        <div
            style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="display: flex; align-items: center">
            <div>
              <van-image round width="35px" height="35px" src="/cover.jpg" />
            </div>
            <div style="font-size: 12px; margin-left: 10px">
              <span>{{ item.name }}</span
              ><br />
              <span>{{ item.time }}</span>
            </div>
          </div>
          <span v-show="popoverid != item.id" @click="setPopover(item.id, index)"> ... </span>
          <div v-show="popoverid == item.id">
            <van-popover v-model:show="showPopover2" placement="left" :actions="actions2" @select="onSelect2" theme="dark">
              <template #reference>
                <span> ... </span>
              </template>
            </van-popover>
          </div>
        </div>
        <p style="font-weight: 500; padding: 10px 0px; font-size: 15px">
          {{ item.message }}
        </p>
        <div v-if="item.imglist.length > 1">
          <van-image
              fit="contain"
              v-for="(items, indexs) in item.imglist"
              :key="indexs"
              :src="items"
              width="100px"
              height="100px"
          />
        </div>
        <div v-else>
          <van-image
              fit="contain"
              v-for="(items, indexs) in item.imglist"
              :key="indexs"
              :src="items"
          />
        </div>
        <div style="text-align: right; font-size: 18px">
          <van-icon name="like-o" :color="item.like ? 'red' : ''" size="20px" @click="like(index)" />
          &nbsp;&nbsp;
          <van-icon v-if="plid != item.id" name="chat-o" size="20px" @click="pl(item.id)" />
          <van-icon v-if="plid == item.id" name="arrow-up" size="20px" @click="pl('')" />
          &nbsp;&nbsp;
          <van-icon name="share-o" color="" size="20px" @click="showShare = true"/>
          &nbsp;&nbsp;
        </div>
        <!-- 评论列表 -->
        <div v-if="item.id == plid">
          <van-field
              v-model="pltext"
              rows="1"
              autosize
              label="留言"
              type="textarea"
              left-icon="chat-o"
              placeholder="输入内容"/>
          <van-button round plain type="primary" size="small" style="padding: 0px 10px;margin-left: 80%" @click="plconfirm()">评论</van-button>

          <div v-for="items in plarr" :key="items.id">
            <!-- 评论列表 -->
            <div v-if="items.id == plid" style="padding: 10px 20px; font-size: 14px; border-bottom: 1px solid #f5f5f5">
              <span style="font-weight: 500">@{{ items.name }}:</span>
              <span>{{ items.content }}</span><br>
              <span style="float: right">{{ items.time }}</span><br>
              <p style="float: right">
                <van-tag  color="#ffe1e1" text-color="#ad0000" @click="hui(items.hid)">{{huiid == items.hid ? '收起': '回复'}}</van-tag>
                &nbsp;
                <van-tag color="#ffe1e1" text-color="#ad0000" @click="delhui(items.id)">删除</van-tag>
              </p>
              <!-- 回复列表 -->
              <div v-for="i in plarr" :key="i.id">
                <div v-if="items.hid == i.id" style="padding: 0 0 0 10px; font-size: 12px">
                  <span style="font-weight: 500">@{{ i.name }}:</span>
                  <span>{{ i.content }}</span><br>
                  <span style="float: right">{{ i.time }}</span><br>
                </div>
              </div>
              <!-- 回复 -->
              <p v-if="items.hid == huiid">
                <van-field
                    v-model="huitext"
                    rows="1"
                    autosize
                    label= "回复:"
                    type="textarea"
                    placeholder="输入内容"/>
                <van-button round plain type="primary" size="small" style="padding: 0px 10px;margin-left: 80%" @click="huiconfirm()">回复</van-button>
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- 功能弹窗 -->
    <van-action-sheet v-model:show="show" :title="text" @cancel="closeSheet">
      <div class="bottom-content">
        <!-- 发布动态弹窗 -->
        <div v-if="text === '添加动态'">
          <van-cell-group inset>
            <van-field
                v-model="message"
                rows="2"
                autosize
                label="你的动态:"
                type="textarea"
                maxlength="1000"
                placeholder="请输入你的动态内容"
                show-word-limit
            />
          </van-cell-group>
          <p style="padding-left: 20px">图片:</p>
          <van-uploader
              v-model="fileList"
              accept="jpg, png"
              capture="camera"
              :after-read="afterRead"
          >
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
          </van-uploader>
          <van-button type="primary" size="large" @click="update()"
          >发布说说</van-button
          >
        </div>
        <!-- 图片弹窗 -->
        <div v-if="text === '上传图片'">
          <van-uploader
              v-model="fileList"
              accept="jpg, png"
              capture="camera"
              :after-read="afterRead"
          >
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
          </van-uploader>
          <van-cell-group inset>
            <van-field
                v-model="message"
                rows="2"
                autosize
                label="图片留言:"
                type="textarea"
                maxlength="50"
                placeholder="请输入留言"
                show-word-limit
            />
          </van-cell-group>
          <van-button type="primary" size="large" @click="update()"
          >上传图片</van-button
          >
        </div>
        <div v-if="text === '我的动态'">动态</div>
      </div>
    </van-action-sheet>
    <!-- 提示弹窗 -->
    <van-dialog
        v-model:show="showDialog"
        title="提示"
        show-cancel-button
        @confirm="onConfirm"
        @cancel="onCancel"
        message="是否保存当前编辑内容?"
    >
    </van-dialog>
    <!-- 分享弹窗 -->
    <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelects"
    />
    <!-- 收藏弹窗 -->
    <van-action-sheet v-model:show="likes" title="我的收藏">
      <div v-for="(item, index) in list" :key="index">
        <div v-if="item.like == true">
          <div
              style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="display: flex; align-items: center">
              <div>
                <van-image round width="35px" height="35px" src="/cover.jpg" />
              </div>
              <div style="font-size: 12px; margin-left: 10px">
                <span>{{ item.name }}</span
                ><br />
                <span>{{ item.time }}</span>
              </div>
            </div>
            <div>
              <span> ... </span>
            </div>
          </div>
          <div style="font-size: 13px; margin-top: 10px">
            <p style="font-weight: 600; padding: 10px 0px">
              {{ item.message }}
            </p>
          </div>
          <div>
            <div v-if="item.imglist.length > 1">
              <van-image
                  fit="contain"
                  v-for="(items, indexs) in item.imglist"
                  :key="indexs"
                  :src="items"
                  width="100px"
                  height="100px"
              />
            </div>
            <div v-else>
              <van-image
                  fit="contain"
                  v-for="(items, indexs) in item.imglist"
                  :key="indexs"
                  :src="items"
              />
            </div>
          </div>
          <div style="text-align: right; font-size: 18px">
            <van-icon
                name="like-o"
                :color="item.like ? 'red' : ''"
                size="20px"
                @click="like(index)"
            />
            &nbsp;&nbsp;
            <van-icon name="chat-o" color="" size="20px" />
            &nbsp;&nbsp;
            <van-icon name="share-o" color="" size="20px" />
            &nbsp;&nbsp;
          </div>
        </div>
      </div>
    </van-action-sheet>
    <van-action-sheet v-model:show="showimg" title="我的图片集">
      <div v-if="img_list.length == 0">
        <div style="text-align: center; font-size: 12px">
          <span>暂无图片</span>
        </div>
      </div>
      <div v-for="(item, index) in img_list" :key="item.id">
        <div style="font-size: 12px; margin-left: 10px">
          <big>{{ item.message }}</big
          >&nbsp;&nbsp;<van-icon
            name="delete-o"
            @click="deluseimg(index)"
        /><br />
          <span>{{ item.time }}</span>
        </div>
        <div v-if="item.imglist.length > 1">
          <van-image
              fit="contain"
              v-for="(items, indexs) in item.imglist"
              :key="indexs"
              :src="items"
              width="100px"
              height="100px"
          />
        </div>
        <div v-else>
          <van-image
              fit="contain"
              v-for="(items, indexs) in item.imglist"
              :key="indexs"
              :src="items"
          />
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.container {
  position: fixed;
  z-index: 1000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: rgba(164, 231, 240, 0.5);
  width: 100%;
  height: 40px;
}
.container div {
  width: 80px;
}
.banner {
  position: relative;
}
.flex-text {
  position: absolute;
  bottom: 15%;
  right: 5%;
  color: #fff;
}
.flex-img {
  position: absolute;
  bottom: 15px;
  left: 20px;
}
.f-banner {
  position: relative;
}
.f-list {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  background-color: #fff;
  text-align: center;
  font-size: 10px;
  border-bottom: 1px solid #ccc;
  padding: 5px 0px;
}
.content {
  padding: 5px;
  margin-bottom: 50px;
  border-bottom: 1px solid #a14949;
}
.bottom-content {
  padding: 5px;
  background-color: #fff;
  border-top: 1px solid #ccc;
  height: 600px;
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
</style>